<template>
	<view class="fanganpage">
		<view class="pagetitle">
			<view class="iconfont icon-jiejuefangan">
				
			</view>
			用户信息
		</view>
		<view class="infobox">
			<view class="numberline">
				<view class="numberbox">
					No:51451214
				</view>
				<view class="numberbox">
					时间：2025-09-28
				</view>
			</view>
			 <view class="line">
			 	
			 </view>
			 <view class="info">
			 	<view class="labelbox">
			 		<view class="label">
			 			姓名：
			 		</view>
					<view class="value">
						王计东
					</view>
			 	</view>
				<view class="labelbox">
					<view class="label">
						性别：
					</view>
					<view class="value">
						男
					</view>
				</view>
				<view class="labelbox">
					<view class="label">
						年龄：
					</view>
					<view class="value">
						60
					</view>
				</view>
				<view class="labelbox">
					<view class="label">
						身高(cm)：
					</view>
					<view class="value">
						174
					</view>
				</view>
				<view class="labelbox">
					<view class="label">
						症状：
					</view>
					<view class="value">
						高血压
					</view>
				</view>
				<view class="labelbox">
					<view class="label">
						会员等级：
					</view>
					<view class="value">
						专病服务
					</view>
				</view>
			 </view>
		</view>
		<view class="box">
			<view class="boxtitle">
				基础数据
			</view>
			<view class="topbox">
				<view class="topleft">
					<view class="num">
						71
					</view>
					<view class="danwei">
						Kg
					</view>
				</view>
				<view class="toplever">
					<view class="biaozhun">
						标准
					</view>
				</view>
			</view>
			<view class="linebox">
				<view class="line">
					<view class="labelbox">
						BMI
					</view>
					<view class="jinduline">
						<progress percent="50"  border-radius="6" activeColor='#23D182' stroke-width="12" />
					</view>
					<view class="numbox">
						23.7%
					</view>
					<view class="biaozhun">
						标准
					</view>
				</view>
				<view class="line">
					<view class="labelbox">
					  体脂率
					</view>
					<view class="jinduline">
						<progress percent="50"  border-radius="6" activeColor='#FF8A00' stroke-width="12" />
					</view>
					<view class="numbox">
						23.7%
					</view>
					<view class="height">
						偏高
					</view>
				</view>
				<view class="line">
					<view class="labelbox">
						肌肉率
					</view>
					<view class="jinduline">
						<progress percent="50"  border-radius="6" activeColor='#23D182' stroke-width="12" />
					</view>
					<view class="numbox">
						23.7%
					</view>
					<view class="biaozhun">
						标准
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="boxtitle">
				体重控制
			</view>
			<view class="zline ">
				<view class="zlabel zhead ">
					指标
				</view>
				<view class="zlabel zhead">
					测量值
				</view>
			</view>
			<view class="zline">
				<view class="zlabel">
					当前体重
				</view>
				<view class="zlabel">
					71.71kg
				</view>
			</view>
			<view class="zline">
				<view class="zlabel">
					标准体重
				</view>
				<view class="zlabel">
					71.71kg
				</view>
			</view>
			<view class="zline">
				<view class="zlabel">
					肌肉量
				</view>
				<view class="zlabel">
					36.50kg
				</view>
			</view>
			<view class="zline">
				<view class="zlabel">
					去脂体重
				</view>
				<view class="zlabel">
					54.71kg
				</view>
			</view>
			<view class="zline">
				<view class="zlabel">
					体重控制量
				</view>
				<view class="zlabel">
					5.90kg
				</view>
			</view>
			<view class="zline">
				<view class="zlabel">
					肌肉控制量
				</view>
				<view class="zlabel">
					0.10kg
				</view>
			</view>
			<view class="zline">
				<view class="zlabel">
					脂肪控制量
				</view>
				<view class="zlabel">
					-6.00kg
				</view>
			</view>
			<view class="zline">
				<view class="zlabel">
					腰围
				</view>
				<view class="zlabel">
					89cm
				</view>
			</view>
			<view class="zline">
				<view class="zlabel">
					臀围
				</view>
				<view class="zlabel">
					96cm
				</view>
			</view>
			<view class="zline">
				<view class="zlabel">
					腰臀比
				</view>
				<view class="zlabel">
					0.93
				</view>
			</view>
		</view>
		
		
		<view class="box">
			<view class="boxtitle">
				人体成分分析
			</view>
			<view class="bodybox">
				<view class="leftimg">
					<image src="/static/tabbar/我 的.png" mode=""></image>
				</view>
				<view class="chengfenbox">
					<view class="cfline">
						<view class="cflabel">
							脂肪量
						</view>
						<view class="cflabel">
							23.7%
						</view>
						<view class="cfbiaozhun">
							标准
						</view>
					</view>
					<view class="cfline">
						<view class="cflabel">
							水分
						</view>
						<view class="cflabel">
							23.7%
						</view>
						<view class="cfbiaozhun">
							标准
						</view>
					</view>
					<view class="cfline">
						<view class="cflabel">
							蛋白量
						</view>
						<view class="cflabel">
							23.7%
						</view>
						<view class="cfbiaozhun">
							标准
						</view>
					</view>
					<view class="cfline">
						<view class="cflabel">
							骨量
						</view>
						<view class="cflabel">
							23.7%
						</view>
						<view class="cfbiaozhun">
							标准
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="boxtitle">
				身体类型
			</view>
			 <BodyTypeChart :activeIndex="activeIndex" :title="chartTitle" />
		</view>
		<view class="box">
			<view class="boxtitle">
				其他指标
			</view>
			<view class="oline">
				<view class="olabel">
					指标
				</view>
				<view class="olabel">
					测量值
				</view>
				<view class="olabel">
					参考值
				</view>
			</view>
			<view class="oline">
				<view class="olabel">
					基础代谢率
				</view>
				<view class="olabel">
					1474 kcal
				</view>
				<view class="olabel">
					1540-1882
				</view>
			</view>
			<view class="oline">
				<view class="olabel">
					内脏脂肪指数
				</view>
				<view class="olabel">
					12
				</view>
				<view class="olabel">
				   ＜11
				</view>
			</view>
			<view class="oline">
				<view class="olabel">
				  皮下脂肪
				</view>
				<view class="olabel">
					21.2%
				</view>
				<view class="olabel">
					8.0-20.0
				</view>
			</view>
			<view class="oline">
				<view class="olabel">
					身体年龄
				</view>
				<view class="olabel">
					59
				</view>
				<view class="olabel">
					56~57
				</view>
			</view>
			<view class="oline">
				<view class="olabel">
					肥胖等级
				</view>
				<view class="olabel">
					标准
				</view>
				<view class="olabel">
					标准
				</view>
			</view>
			<view class="oline">
				<view class="olabel">
					蛋白率
				</view>
				<view class="olabel">
					16.3
				</view>
				<view class="olabel">
					16.0~18.0
				</view>
			</view>
		</view>
		
	
	</view>
</template>

<script>
	import BodyTypeChart from "@/components/BodyTypeChart.vue"
	export default {
		data() {
			return {
				 activeIndex: 1, // 默认高亮 "偏胖型"
				      chartTitle: "偏胖型"
			}
		},
		computed: {
		    typeNames() {
		      return [
		        "隐性肥胖", "偏胖型", "隐性肥胖",
		        "缺乏肌肉型", "标准型", "标准肌肉型",
		        "偏瘦型", "偏瘦肌肉型", "健美肌肉型"
		      ]
		    }
		  },
		 components: { BodyTypeChart },
		methods: {
		
		}
	}
</script>

<style lang="less" scoped>
 .fanganpage{
	 width: 750rpx;
	 box-sizing: border-box;
	 padding: 40rpx 20rpx;
	 background-color: whitesmoke;
	 .pagetitle{
		 display: flex;
		 align-items: center;
		 color: #1a4f8a;
		 font-weight: bold;
		 font-size: 34rpx;
		 margin-bottom: 20rpx;
		 .iconfont{
			 margin-right: 20rpx;
			 font-size: 44rpx;
		 }
	 }
	 .infobox{
		 margin: 20rpx 0;
		 width: 100%;
		 background-color: white;
		 box-sizing: border-box;
		 padding: 20rpx;
		 .numberline{
			 display: flex;
			 align-items: center;
			 line-height: 2.2;
			 font-size: 24rpx;
			 font-weight: bold;
			 .numberbox{
				 margin-right: 40rpx;
			 }
		 }
		 .line{
			 width: 100%;
			 border-top: 8rpx solid #1a4f8a;
			 border-bottom: 1rpx solid #1a4f8a;
			 padding: 4rpx 0;
			 margin: 20rpx 0;
		 }
		 .info{
			 width: 100%;
			  display: flex;
			  align-items: flex-start;
			  flex-wrap: wrap;
			  line-height: 2.2;
			  .labelbox{
				  display: flex;
				  width: 33%;
				  font-size: 22rpx;
				  font-weight: bold;
				   align-items: center;
				  .value{
					  font-size: 26rpx;
					  color: #1a4f8a;
				  }
			  }
			  
		 }
	 }
	 .box{
		 width: 100%;
		 margin-top: 30rpx;
		 background-color: white;
		 border-radius: 20rpx;
		 box-sizing: border-box;
		 padding: 20rpx;
		   box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
		 .boxtitle{
			 font-weight: bold;
			 padding-left: 20rpx;
			 height: 30rpx;
			 font-size: 30rpx;
			 line-height: 30rpx;
			 border-left: 8rpx solid #1a4f8a;
			 
		 }
		 .topbox{
			 width: 100%;
			 display: flex;
			 align-items: center;
			 padding-bottom: 20rpx;
			 border-bottom: 4rpx solid whitesmoke;
			 .topleft{
				 display: flex;
				 align-items: center;
				 width: 40%;
				 .num{
					 font-weight: bold;
					 font-size: 100rpx;
					 color: #3D3D3D;
					 margin-left: 20rpx;
				 }
				 .danwei{
					 font-size: 30rpx;
					 font-weight: bold;
					 
				 }
			 }
			 .toplever{
				 margin-left: 20rpx;
				 .biaozhun{
					 width: 100rpx;
					 height: 34rpx;
					 border-radius: 6rpx;
					 text-align: center;
					 line-height: 34rpx;
					 color: white;
					 font-size: 24rpx;
					 background-color: #23D182;
				 }
			 }
			 
		 }
		 .linebox{
			 width: 100%;
			 margin-top: 20rpx;
			 .line{
				 display: flex;
				 align-items: center;
				  justify-content: space-between;
				  height: 60rpx;
				  line-height: 60rpx;
				  font-size: 28rpx;
				  font-weight: 600;
				 .labelbox{
					 width: 22%;
					 background: #eeeeee;
					 border-radius: 2rpx;
					 box-sizing: border-box;
					 padding: 0 10rpx;
				 }
				 .jinduline{
					 width: 32%;
					 background: #eeeeee;
					 border-radius: 2rpx;
					 box-sizing: border-box;
				 }
				 .numbox{
					width: 22%;
					 background: #eeeeee;
					border-radius: 2rpx;
					box-sizing: border-box;
					padding: 0 10rpx;
					 text-align: center;
				 }
				 .height{
					 width: 22%;
					 background: #FF8A00;
					 border-radius: 2rpx;
					 box-sizing: border-box;
					 text-align: center;
					 color: white;
					 padding: 0 10rpx;
				 }
				 .biaozhun{
					 width: 22%;
					 background: #23D182;
					 border-radius: 2rpx;
					 box-sizing: border-box;
					 text-align: center;
					 color: white;
					 padding: 0 10rpx;
				 }
			 }
			 
		 }
		 .zline{
			 width: 100%;
			 display: flex;
			 align-items: center;
			 justify-content: space-between;
			 margin-top: 8rpx;
			 .zhead{
				 color: #aaaaaa;
			 }
			 .zlabel{
				 width: 49%;
				height: 60rpx;
				line-height: 60rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				background-color: #efefef;
				font-weight: bold;
				font-size: 30rpx;
			 }
			 
		 }
		 .bodybox{
			 width: 100%;
			 display: flex;
			 margin-top: 20rpx;
			 justify-content: space-between;
			 .leftimg{
				 width:30%;
                 image{
					 width: 100%;
					 height: 100%;
				 }
			 }
			 .chengfenbox{
				 width: 69%;
				 .cfline{
					 width: 100%;
					 display: flex;
					 align-items: center;
					 justify-content: space-between;
					 margin-top: 8rpx;
					 .cflabel{
						 width: 33%;
						 height: 60rpx;
						 box-sizing: border-box;
						 background-color: #efefef;
						 font-size: 30rpx;
						 padding: 0 10rpx;
						 line-height: 60rpx;
						 font-weight: bold;
					 }
					 .cfbiaozhun{
						 width: 33%;
						 height: 60rpx;
						 box-sizing: border-box;
						 background-color: #23D182;
						 font-size: 30rpx;
						color: white;
							 line-height: 60rpx;
							 text-align: center;
						 font-weight: bold;
					 }
				 }
			 }
		 }
		 .oline {
			 width: 100%;
			 display: flex;
			 align-items: center;
			 justify-content: space-between;
			 margin-top: 10rpx;
			 .olabel{
				 width: 33%;
				 height: 60rpx;
				 line-height: 60rpx;
				 box-sizing: border-box;
				 padding-left: 10rpx;
				 background-color: #efefef;
				 font-size: 30rpx;
				 font-weight: bold;
			 }
		 }
	 }
	
 }
</style>
